<template>
  <FullScreenDialog :title="dialog.title" :width="dialog.width" :screenFlag="dialog.screenFlag" :visible="dialog.visible"
    v-if="dialog.visible" :showFooter="dialog.showFooter" @onClose="onClose" @onConfirm="confirm">
    <template v-slot:content>
      <div class="related">
        <div class="related-pdf">
          <!-- 什么数据在渲染这个东西 以前的历史数据怎么渲染的 -->
          <ImgCanVas ref="RefImgCanVas"
            :img="showDate.img_info && showDate.img_info[0] && showDate.img_info[0].imageBase64"
            :img-obj="showDate.img_info && showDate.img_info[0] && showDate.img_info[0]"
            :record-list="showDate.recordList" @inputPos="inputPos" :type="showDate.type"></ImgCanVas>
        </div>
        <div class="related-page">
          <el-button>{{ showDate.search.pageNumber }}/{{ showDate.numPages }}</el-button>
          <el-button type="primary" @click="btnPre" :disabled="showDate.search.pageNumber === 1">上一页</el-button>
          <el-button type="primary" @click="btnNext" :disabled="showDate.search.pageNumber === showDate.numPages">下一页</el-button>
        </div>
      </div>
    </template>
  </FullScreenDialog>
</template>

<script setup lang='ts'>
import { ref, nextTick } from 'vue'
import useDialog from '@/hooks/useDialog';
import useInstance from '@/hooks/useInstance';
import ImgCanVas from './ImgCanvas.vue'
import quoteData from '../modelTs/quoteData'
import {quoteStore} from '@/store/quoteData'
const RefImgCanVas = ref<any>(null)
const emit = defineEmits(['saveRect','closeData'])
const { showDate, getImage, btnPre, btnNext, getFileList, clearShowDate,getImageLook } = quoteData(RefImgCanVas)
// 使用
const store = quoteStore()
const { dialog, onShow } = useDialog()
const { global, proxy } = useInstance();
const onClose = () => {
  emit('closeData', showDate.img_info[0].commentsDTOs)
  dialog.visible = false
  clearShowDate()

// 需要一个传递数据的东西 怎么处理 你知道吗 你知道你的数据存在哪里的不
}
const inputPos = (positions, index) => {
  // 点击选中的 分析项 1 点击删除 找到相同的分析项 是否唯一 title 可以作为一个东西来操作 文件的id
  const tsList = {
    title: showDate.search.filesId,//fileId,
    titleDesc: showDate.search.pageNumber,// page
    distLeft: positions.left,
    distTop: positions.top,
    id: '',
    rectIndex: index,
    imageId: showDate.imageId, // 可以自己定义为文件的id 看哈就是查询这个页码需要什么东西 
    width: positions.width,
    height: positions.height
  }
  store.sortData(tsList)
  // // 还有一种情况就是 第二次添加再一个数组中 这个是第一次this.img_info[0].commentsDTOs.length
  // this.$set(this.img_info[0].commentsDTOs, this.img_info[0].commentsDTOs.length, this.tsList)
  showDate.img_info[0].commentsDTOs.push([{ ...tsList }])
  // 这个地方就是数据嘛 现在可以开始传递数据了嘛

  emit('saveRect', showDate.img_info[0].commentsDTOs)
}
// 父级数据
// 保存
const confirm = () => { }
const show = async (type: string, row?: any) => {
  await getFileList(row)
  await getImage({ filesId: row.id, pageNumber: 1 })
  dialog.width = 840
  dialog.title = row.fileName
  dialog.showFooter = false
  dialog.screenFlag = false
  // 我现在需要干嘛 直接说 1 canvas引入 然后获取数据 知道吗
  onShow()
  if (showDate.img_info.length > 0) {
    nextTick(() => {
      //  console.log(RefImgCanVas.value,'RefImgCanVas');
      RefImgCanVas.value?.initImage()
    })
  }
}
defineExpose({
  show
})

</script>
<style scoped lang='scss'>
.related{
      position: relative;
      .related-page{
        position: fixed;
        height: 40px;
        width: 814px;
        bottom: 5px;
        border-radius: 5px;
        text-align: center;
        line-height: 40px;
      }
}
</style>